<template>
	<view class="container">
		<view class="header">
			<u--text type="warning" text="向我展示"></u--text>
		</view>
		<!-- <u-line></u-line> -->
		<view class="content">
			<u-popup :show="show" @close="close" @open="open">
				<u-radio-group v-model="radiovalue1" placement="column" @change="groupChange">
					<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in radiolist1" :key="index"
						:label="item.name" :name="item.name" @change="radioChange">
					</u-radio>
				</u-radio-group>
			</u-popup>
			<u-cell-group >
				<u-cell class="group" title="显示性别" @click="show = true"  v-model="radiovalue1" :isLink="true" arrow-direction="right"></u-cell>
			</u-cell-group>
			
			
			<view class="item" v-for="(item, index) in settings" :key="index">
				<text class="label">{{ item.label }}</text>
				<switch class="switch" :checked="item.checked" @change="changeSetting(index)"></switch>
			</view>
			<u-line></u-line>
			<view class="item" v-for="(item, index) in settingstwo" :key="item.id">
				<text class="label" @click="toCheckoutLog(index)">{{ item.label }}</text>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				settings: [{
						label: '推送通知',
						checked: true,
						id: 1
					},
					{
						label: '自动扩大搜索范围',
						checked: true,
						id: 2
					},
					// { label: '声音开关', checked: false },
					// { label: '震动开关', checked: false },
				],
				settingstwo: [{
						label: '个人信息'
					},
					{
						label: '帮助与反馈'
					},
					{
						label: '新手引导'
					},
					{
						label: '分享'
					},
					{
						label: '关于'
					},
					// { label: '声音开关', checked: false },
					// { label: '震动开关', checked: false },
				],
				radiolist1: [{
						name: '男',
						disabled: false
					},
					{
						name: '女',
						disabled: false
					},
					{
						name: '不限',
						disabled: false
					}
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				radiovalue1: '未知',
				show: false

			}
		},
		methods: {
			changeSetting(index) {
				this.settings[index].checked = !this.settings[index].checked;
			},
			toCheckoutLog(m) {
				// console.log(m)
				if (m == 0) {
					uni.navigateTo({
						url: '/pages/mine/setup/checkoutlog'
					})
				}
			},
			close() {
				this.show = false
				// console.log('close');
			},
			groupChange(n) {
				console.log('groupChange', n);
			},
			radioChange(n) {
				console.log('radioChange', n);
			}
		}
	}
</script>
<style lang="scss" scoped >
	.container {
		display: flex;
		flex-direction: column;
		/* height: 100vh; */
	}

	.header {
		padding: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		/* height: 10%; */
		/* border-bottom: 1px solid #ddd; */
	}

	.title {
		font-size: 20px;
		font-weight: bold;
	}

	.content {
		display: flex;
		flex-direction: column;
		/* align-items: center; */
		height: 90%;
		padding: 20rpx;
	}

	.item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		padding: 10px 15px;
		margin-bottom: 20rpx;
	}

	.label {
		font-size: 16px;
	}

	.switch {
		transform: scale(0.8);
	}
	
	::v-deep uni-view .u-cell__body{
		padding: 10px 0;
	}
</style>
